import React from 'react';
import { Row, Col } from 'antd';
import * as PropTypes from 'prop-types';
import styles from './index.less';

class Index extends React.Component {
  static defaultProps = {
    visible: true,
    title:'title',
    list:[
      {type:'icon',label:'有违法出租户',imgSrc:'/map/icon/有违法出租户.png'},
      {type:'square',label:'1-100',color:'#ff0000',borderColor:'#000000'},
      {type:'circle',label:'1-100',color:'#ffff00',borderColor:'#000000'}
      ]
  }

  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidMount() {
  }

  renderList(list){
    return (
      Array.isArray(list) && list.map((data,i) => {
        const {type,label,imgSrc,color,borderColor} = data
        let html = ''
        switch (type){
          case 'icon':
            html =  <div  key={i} className={ styles.item}>
              <div className={styles[type]} style={{background:`url(${imgSrc}) center no-repeat`,backgroundSize: '100%'}} > </div>
              <div className={styles.label}>{label}</div>
            </div>
            break;
          case '':
            html =  <div  key={i} className={ styles.item}>
              <div className={styles.label}>{label}</div>
            </div>
            break;
          case 'square':
            html =  <div key={i} className={ styles.item}>
              <div className={styles[type]} style={{backgroundColor:color,border:borderColor?('1px solid '+borderColor):'none'}}></div>
              <div className={styles.label}>{data.label}</div>
            </div>
            break;
          case 'circle':
            html =  <div key={i} className={ styles.item}>
              <div className={styles[type]} style={{backgroundColor:color,border:borderColor?('1px solid '+borderColor):'none'}}></div>
              <div className={styles.label}>{label}</div>
            </div>
            break;
        }
        return html
      })
    );
  }
  render() {
    const { visible,title,list} = this.props;
    return (
      <Row type="flex" justify="start" align="bottom">
        <Col span={24} style={{display:visible?'block':'none'}}>
          <div className={styles.legend}>
            <div className={styles.title}>{title}</div>
            {this.renderList(list)}
          </div>
        </Col>
      </Row>
    );
  }
}

Index.propTypes = {
  visible:PropTypes.bool,
  title:PropTypes.string,
  list:PropTypes.array
}

export default Index;
